<script setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import Breadcrumb from "@/stores/Breadcrumb.js";
import { onBeforeRouteUpdate } from "vue-router";
import loginUser from "@/stores/LoginUser.js";
import breadcrumb from "@/stores/Breadcrumb.js";
import router from "@/router/index.js";
import { User } from '@element-plus/icons-vue'

const { userInfo } = storeToRefs(loginUser())

// 获取用户名称首字母（新增方法）
const getInitial = () => {
  const name = userModel?.value?.nickname || userModel?.value?.username || '用'
  return name.charAt(0).toUpperCase()
}

// 处理头像加载失败（新增方法）
const handleAvatarError = (e) => {
  e.target.onerror = null // 防止无限循环
  e.target.src = '' // 清空错误图片，显示默认头像
}

onMounted(() => {
  Breadcrumb().breadcrumb.one = '';
  Breadcrumb().breadcrumb.two = ''
  initData()
})

onBeforeRouteUpdate((to, from, next) => {
  if (to.path === '/index') {
    initData()
  }
  next()
})

async function initData() {
  // 初始化逻辑
}

let userModel = ref(loginUser().userModel)
const goBack = () => {
  breadcrumb().popBreadcrumb()
  if (window.history.state.back) {
    router.back()
  } else {
    router.push('/index')
  }
}

const logout = () => {
  loginUser().userModel = {
    uid: -1,//未登录,
    role: {
      menuList: []
    }
  }
  router.push("/login");
}
</script>

<template>
  <div class="welcome-container">
    <!-- 欢迎卡片 -->
    <div class="welcome-card">
      <!-- 用户头像区域 -->
      <div class="avatar-wrapper">
        <img
            v-if="userModel?.avatarUrl"
            :src="userModel.avatarUrl"
            alt="用户头像"
            class="user-avatar"
            @error="handleAvatarError"
        >
        <div v-else class="default-avatar">
          <User class="avatar-icon" />
          <span class="avatar-initial">{{ getInitial() }}</span>
        </div>
      </div>

      <!-- 欢迎信息区域 -->
      <div class="welcome-info">
        <h1 class="welcome-title">
          欢迎回来，{{ (userModel?.nickname || userModel?.username || '用户').slice(0, 10) }}！
        </h1>
        <p class="welcome-desc">
          今天是 {{ new Date().toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          weekday: 'long'
        }) }}
        </p>
        <div class="login-time">
          <span>上次登录时间：</span>
          <span>{{ userModel?.lastLoginTime ? new Date(userModel.lastLoginTime).toLocaleString() : '首次登录' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.welcome-container {
  min-height: 100vh;
  padding: 40px 20px 20px; /* 增加顶部内边距，减少底部内边距 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 从顶部开始排列，不再居中 */
  box-sizing: border-box;
  margin-top: 60px; /* 控制整体距离顶部的距离 */
}

.welcome-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 30px 40px;
  width: 100%;
  max-width: 800px;
  display: flex;
  align-items: center;
  gap: 30px;
  transition: transform 0.3s ease;
}

.welcome-card:hover {
  transform: translateY(-5px);
}

.avatar-wrapper {
  flex-shrink: 0;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #f0f2f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.default-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #f0f2f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
}

.avatar-icon {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.8);
}

.avatar-initial {
  position: absolute;
  color: white;
  font-size: 36px;
  font-weight: bold;
}

.welcome-info {
  flex-grow: 1;
}

.welcome-title {
  margin: 0 0 15px 0;
  font-size: 28px;
  color: #1f2329;
  font-weight: 600;
}

.welcome-desc {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #606266;
}

.login-time {
  font-size: 14px;
  color: #8c8c8c;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .welcome-container {
    margin-top: 30px; /* 移动端减少顶部距离 */
    padding-top: 20px;
  }

  .welcome-card {
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
  }

  .welcome-title {
    font-size: 24px;
  }

  .user-avatar, .default-avatar {
    width: 100px;
    height: 100px;
  }
}
</style>